<div class="container">
  <div class="box">
    <div class="left">
      <div class="l-title">
        云音乐排行榜
      </div>
      <div class="l-list">
        <div class="l-item" *ngFor="let item of allList,let index = index;"
          [ngStyle]="{'background-color': index==selectedSlider?'#eee':'#f8f8f8'}" (click)="selectItem(item,index)">
          <div class="flex">
            <div class="l-img">
              <img [src]="item.coverImgUrl" width="50" height="50" alt="">
            </div>
            <div class="l-con">
              <p class="l-c-name text-over">{{item.name}}</p>
              <p class="l-c-freq text-over">{{item.updateFrequency}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="r-content">
        <!-- 加载框 -->
        <div style="text-align: center;margin: 20px 0;">
          <nz-spin nzSimple *ngIf="loading"></nz-spin>
        </div>
        <!-- 头部简介 -->
        <div class="pl-header" *ngIf="!loading">
          <div class="pl-header-box">
            <!-- 歌单图片 -->
            <div class="pl-header-img">
              <img class="title-img" [src]="playlistDetail.coverImgUrl" *ngIf="playlistDetail.coverImgUrl" width="208"
                height="208">
            </div>

            <!-- 歌单信息 -->
            <div class="pl-header-right">
              <div class="pl-header-title">
                <!-- 歌单名称 -->
                <div class="pl-header-tag"></div>
                <h2>{{playlistDetail.name}}</h2>
              </div>
              <div class="pl-header-create">
                <img [src]="playlistDetail.creator.avatarUrl" alt="avatarUrl" *ngIf="playlistDetail.creator.avatarUrl">
                <span (click)="jumpUser(playlistDetail.creator.userId)">{{playlistDetail.creator.nickname}}</span>
                <span>创建: {{playlistDetail.createTime | date:'yyyy-MM-dd hh:mm:ss'}}</span>
              </div>
              <!-- 工具栏 -->
              <div class="album-header-tool">
                <div>
                  <i nz-icon nzType="play-circle" nzTheme="outline" (click)="playFirstSong()"></i>
                  <span (click)="playFirstSong()">播放</span>
                </div>
                <div (click)="favorite()">
                  <i nz-icon nzType="folder-add" nzTheme="outline"></i>
                  <span>收藏 ({{playlistDetail.subscribedCount}})</span>
                </div>
                <div (click)="share()">
                  <i nz-icon nzType="share-alt" nzTheme="outline"></i>
                  <span>分享({{playlistDetail.shareCount}})</span>
                </div>
                <div (click)="sentMessage()">
                  <i nz-icon nzType="message" nzTheme="outline"></i>
                  <span>评论 ({{playlistDetail.commentCount}})</span>
                </div>
              </div>
              <div class="pl-header-tags">
                <div class="pl-header-tags-list">
                  标签:
                  <div class="pl-header-tag" *ngFor="let tag of playlistDetail.tags">{{tag}}</div>
                </div>
                介绍:
                <span *ngFor="let des of description">{{des}}<br /></span>
              </div>
            </div>
          </div>
        </div>

        <!-- 歌曲列表 -->
        <div class="pl-songlist">
          <div class="pl-songlist-header">
            <h2>歌曲列表 ({{playlistDetail.tracks.length}})</h2>
            <span>播放次数: <span style="color:#000">{{playlistDetail.playCount}}</span> </span>
          </div>
          <!-- 歌曲表单 -->
          <div class="pl-songlist-table">
            <nz-table #basicTable [nzData]="playlistDetail.tracks" [nzFrontPagination]="false">
              <thead>
                <tr>
                  <th></th>
                  <th>歌曲标题</th>
                  <th>时长</th>
                  <th>歌手</th>
                  <th>专辑</th>
                  <!-- <th>操作</th> -->
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let data of basicTable.data,let index = index">
                  <td style="display: flex;">
                    <span style="margin-right: 10px;">{{index}}</span>
                    <i class="icon-zanting" (click)="handlePlay(data)"></i>
                  </td>
                  <td>
                    <div class="td-name" class="td-name" (click)="toSong(data.id)">
                      {{ data.name }}
                    </div>
                  </td>
                  <td class="td-size">{{ data.dt  | date:'mm:ss'}}</td>
                  <td>
                    <div class="td-artist">
                      <span *ngFor="let item of data.ar" (click)="toArtist(item.id)">
                        {{ item.name }}
                      </span>
                    </div>
                  </td>
                  <td>
                    <div class="td-album" (click)="toAlbum(data.al.id)">
                      {{ data.al.name }}
                    </div>
                  </td>
                </tr>
              </tbody>
            </nz-table>
          </div>
        </div>

        <!-- 评论组件 -->
        <app-comments #comment [commentTotal]="commentTotal" [hotComments]="hotComments" [comments]="comments"
          [currentPage]="1" (pageIndexChange)="pageIndexChange($event)"></app-comments>
      </div>
    </div>
  </div>
</div>